<template>
  <div class="ksinfo_bg">
    <!-- 上方图片 -->
    <el-image :src='url' :fit='fit'></el-image> <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>学校介绍</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-tabs type="border-card" tab-position="left" :model="tableData">
      <el-tab-pane label="学校简介" prop="profile">
        <P> {{tableData.profile}} </P>
      </el-tab-pane>
      <el-tab-pane label="创校历史" prop="history">
        <P> {{tableData.history}} </P>
      </el-tab-pane>
      <el-tab-pane label="教学理念" prop="concept">
        <P> {{tableData.concept}} </P>
      </el-tab-pane>
      <el-tab-pane label="校园介绍" prop="introduce">
        <P> {{tableData.introduce}} </P>
      </el-tab-pane>
      <el-tab-pane label="校园风光" prop="url">
        <el-image :src="tableData.url" fit='fill'></el-image>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import nameImg from '@/assets/infoBG.jpg'
  export default {
    data() {
      return {
        tableData: [],
        fit: 'fill',
        url: nameImg,
      }
    },
    created() {
      this.gettableData()
    },
    methods: {
      async gettableData() {
        const {
          data: res
        } = await this.$http.get('introduce/' + 0) 
        
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        } 
        this.tableData = res.data
         
         console.log(this.tableData)
      },
    }
  }
</script>
<style>
  .ksinfo_bg {
    height: 1000px;
    width: 100%;
    /* background: url(../../assets/bg1.jpg) no-repeat; */
    /* background-size: 100% 1000px; */
  }

  .ksinfo_bg .el-image {
    width: 100%;
    height: 37%;
    max-height: 370px;
    margin-top: 0%;
    margin-left: 0%;
  }

  .ksinfo_bg .el-breadcrumb {
    margin: 30px 15%;
    font-size: 14px;
  }

  .ksinfo_bg .el-divider {
    background: rgb(20, 94, 11);
    width: 88%;
    margin-left: 6%;
  }

  .ksinfo_bg .el-tabs {
    width: 76%;
    height: 50%;
    margin-left: 15%;
  }

  .ksinfo_bg .el-tabs .el-tab-pane {}

  /* .ksinfo_bg .main_body{    width: 80%;    height: 50%;    margin-top: 3%;    margin-left: 5%;  }  .el-aside{  }  .el-aside .el-menu{    text-align: center;    margin-top: 25%;  } */
</style>
